<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>demo</title>
	</head>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			border: 0;
			outline: 0;
		}
		
		.loading {
			    width: 145px;
			    height: 100px;
			    margin: 20px auto;
			    border-radius: 5px;
			    text-align: center;
			    background: #313131;
			    box-shadow: 0px 0px 15px 3px #ccc;
		}
		
		.loading span {
			margin-top: 20px;
			display: inline-block;
		}
		
		.loading p {
			margin-top: 10px;
			font-size: 12px;
			color: #fff;
		}
		
		.xz {
			-webkit-animation: spin 2s infinite linear;
			-moz-animation: spin 2s infinite linear;
			-o-animation: spin 2s infinite linear;
			animation: spin 2s infinite linear;
		}
		
		@-moz-keyframes spin {
			0% {
				-moz-transform: rotate(0deg);
			}
			100% {
				-moz-transform: rotate(359deg);
			}
		}
		
		@-webkit-keyframes spin {
			0% {
				-webkit-transform: rotate(0deg);
			}
			100% {
				-webkit-transform: rotate(359deg);
			}
		}
		
		@-o-keyframes spin {
			0% {
				-o-transform: rotate(0deg);
			}
			100% {
				-o-transform: rotate(359deg);
			}
		}
		
		@-ms-keyframes spin {
			0% {
				-ms-transform: rotate(0deg);
			}
			100% {
				-ms-transform: rotate(359deg);
			}
		}
		
		@keyframes spin {
			0% {
				transform: rotate(0deg);
			}
			100% {
				transform: rotate(359deg);
			}
		}
	</style>

	<body>

		<div class="loading">
			<span class="xz"><img src="loading.png"/></span>
			<p>数据加载中....</p>
		</div>

	</body>

</html>